<template>
    <el-card>
        <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="100px">
            <el-form-item label="菜单名称：" prop="name">
                <el-input v-model="queryParams.name" placeholder="菜单名称" size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单编号：" prop="code">
                <el-input v-model="queryParams.code" placeholder="菜单编号" size="small"></el-input>
            </el-form-item>
             <el-form-item >
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-delete" size="small" @click="resetQuery('queryParams')">清空</el-button>
            </el-form-item>
      </el-form>
         <el-table
            :data="tableData"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="load"
            size="mini"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                type="selection"
                width="55">
             </el-table-column>
            <el-table-column
                type="index"
                label="#"
                width="55">
             </el-table-column>
            <el-table-column
                prop="name"
                label="菜单名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="path"
                label="路由地址"
                width="180">
            </el-table-column>
            <el-table-column
                prop="source"
                label="菜单图标">
            </el-table-column>
             <el-table-column
                prop="code"
                label="菜单编号">
            </el-table-column>
             <el-table-column
                prop="alias"
                label="菜单别名">
            </el-table-column>
              <el-table-column
                prop="sort"
                label="菜单排序">
            </el-table-column>
             <el-table-column label="操作">
                <template slot-scope="scope">
                      <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-setting"
                    @click="handleSetting(scope.row)">权限配置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer
            title="[流控管理] 数据权限配置!"
            :visible.sync="dataPowerSetting"
            border
            direction="rtl"
            size="50%">
             <el-form label-width="90px">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form-item label="菜单名称">
                        <el-input size="small" placeholder="岗位类型"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="菜单编号">
                        <el-input size="small" placeholder="岗位编号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
                        <el-button icon="el-icon-delete" size="small">清空</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
         </el-form>
              <el-row :gutter="10">
                <el-col :span="24">
                    <div style="margin-bottom: 10px;padding: 0 10px">
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
                        <el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleDelete(multipleSelection)">删除</el-button>
                    </div>
                </el-col>
             </el-row>
            <el-table
                :data="tableData2"
                border
                size="mini"
                style="width: 100%"
                 @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    type="index"
                    label="#"
                    width="55">
                </el-table-column>
                <el-table-column
                prop="scopeName"
                label="权限名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="resourceCode"
                label="权限编号"
                width="180">
                </el-table-column>
                <el-table-column
                    prop="scopePath"
                    label="权限路径">
                </el-table-column>
                <el-table-column
                    prop="scopeTypeName"
                    label="接口类型">
                        <template slot-scope="scope">
                             <el-tag>{{scope.row.scopeTypeName}}</el-tag>
                        </template>
                </el-table-column>
                 <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        type="text"
                        size="mini"
                        @click="handleView(scope.row)">查看</el-button>
                         <el-button
                        type="text"
                        size="mini"
                        @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
             </el-table>
       </el-drawer>
       <el-dialog :title="title" :visible.sync="addFormVisible" @close="resetForm">
            <el-form :model="form" :rules="rules" ref="form" :disabled="isView">
                <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item  prop="scopeName" label="权限名称：" required :label-width="formLabelWidth">
                        <el-input v-model="form.scopeName" autocomplete="off" size="mini" placeholder="请输入权限名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item  prop="resourceCode" label="权限编号：" required :label-width="formLabelWidth">
                        <el-input v-model="form.resourceCode" autocomplete="off" size="mini" placeholder="请输入权限编号"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item  prop="scopePath" label="权限路径:" required :label-width="formLabelWidth">
                            <el-input v-model="form.scopePath" autocomplete="off" size="mini" placeholder="请输入权限字段"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  prop="scopeType" label="接口类型：" required :label-width="formLabelWidth">
                            <el-select v-model="form.scopeType" placeholder="请选择" size="mini">
                                <el-option
                                v-for="item in ruleList"
                                :key="item.dictKey"
                                :label="item.dictValue"
                                :value="item.dictKey">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item  prop="remark" label="备注" :label-width="formLabelWidth">
                                <el-input v-model="form.remark" autocomplete="off" size="mini" placeholder="请输入权限字段"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSubmit('form')" size="small">保存</el-button>
                <el-button @click="addFormVisible = false" size="small">取消</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
import {getDictList,getApiScopeList,getMenuTreeList,saveApiScopeData,delApiScope } from '@/api/authority/api-scope.api.js'
    export default {
        data() {
            return {
                queryParams: {
                    name: undefined,
                    code: undefined
                },
                tableData: [],
                dataPowerSetting: false,
                form: {},
                rules: {
                    scopeName:[
                         { required: true, message: '请输入权限名称', trigger: 'blur' },
                    ],
                    resourceCode:[
                         { required: true, message: '请输入权限编号', trigger: 'blur' },
                    ],
                    scopeColumn:[
                         { required: true, message: '请输入权限字段', trigger: 'blur' },
                    ],
                    scopeType:[
                         { required: true, message: '请选择规则类型', trigger: 'blur' },
                    ],
                    scopeField:[
                         { required: true, message: '请输入可见字段', trigger: 'blur' },
                    ],
                     scopeClass:[
                         { required: true, message: '请输入MybatisMapper对应方法的完整类名路径', trigger: 'blur' },
                    ],
                },
                formLabelWidth: '120px',
                title: '新增',
                addFormVisible: false,
                ruleList: [],
                tableData2: [],
                menuId: '',
                multipleSelection:[],
                isView: false
            }
        },
        mounted() {
           this.getList();
        },
        methods: {
            getList() {
                getMenuTreeList(this.queryParams).then(res=>{
                    if(res.code === 200) {
                        this.tableData = res.data
                    }
               })
            },
            // 搜索
            handleQuery() {
                this.getList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getList();
            },
             load(tree, treeNode, resolve) {
                this.queryParams.parentId=tree.id
                getMenuTreeList(this.queryParams).then(res=>{
                    const {data} = res
                    if(data.code === 200) {
                        resolve(data.data)
                    }
                })
            },
              handleSelectionChange(val) {
                this.multipleSelection = val;
            },
             async handleSetting(row) {
                this.dataPowerSetting = true;
                this.getScopeData();
                this.menuId = row.id;
                const result = await getDictList('api_scope_type');
                if(result.code === 200) {
                    this.ruleList = result.data
                }
            },
           async getScopeData() {
                const params = {menuId: this.menuId,current:1,size:10};
                const result = await getApiScopeList(params);
                if(result.code === 200) {
                    this.tableData2 = result.data.records;
                }
            },
            handleAdd() {
                this.isView = false;
                this.addFormVisible = true;
            },
             resetForm() {
                this.$refs['form'].resetFields();
            },
            handleDelete(ids) {
                if(ids.length == 0) {
                    this.$message({
                        type: 'error',
                        message: '请至少选择一条数据!'
                    });
                    return;
                }
                let scopeIds;
                typeof ids === 'string'?scopeIds=ids:scopeIds=ids.map(item=>item.id).toString();
                this.$confirm('确定将选择的数据删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async () => {
                        const result = await delApiScope(scopeIds);
                        if(result.code === 200) {
                             this.$message({
                                type: 'success',
                                message: '删除成功!'
                           });
                           this.getScopeData();
                        }
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleEdit(row) {
                 this.isView = false;
                 row.scopeType = row.scopeType + ""
                 this.form = row;
                 this.title = '编辑';
                 this.addFormVisible = true;
            },
            handleView(row) {
                this.isView = true;
                 row.scopeType = row.scopeType + ""
                this.form = row;
                this.title = '查看';
                this.addFormVisible = true;
            },
            handleSubmit(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let data = {
                            menuId: this.menuId,
                            $scopeType:  this.ruleList.find(item=>{
                                return item.dictKey === this.form.scopeType
                            }).dictValue,
                            ...this.form
                        }
                        const result = await saveApiScopeData(data);
                        if(result.code === 200) {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            this.addFormVisible = false;
                            this.getScopeData();
                        }
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>